/**------------------------------- 计数器 --------------------------------*/
// function counterVue(str) {
//     return new Vue({
//         el: '#counter4',
//         data() {
//             return {
//                 config: {
//                     number: [0],
//                     content: str,
//                     key: 0
//                 }
//             }
//         },
//         methods: {
//             setnum: function (num) {
//                 this.config = {
//                     number: [num],
//                     content: str
//                 };
//
//                 return this.config;
//             },
//         }
//     });
// }

//------------ 检测天数 -----------
// var counterVue1 = counterVue('{nt}天');
// function counter1(days) {
var counterVue1 = new Vue({
    el: '#counter1',
    data() {
        return {
            config: {
                number: [0],
                content: '{nt}天'
            }
        }
    },
    methods: {
        setnum: function (num) {
            this.config = {
                number: [num],
                content: '{nt}天'
            };
            return this.config;
        }
    }
});
// }

//------------ 黑广播数 -----------
// function counter2(num) {
var counterVue2 = new Vue({
    el: '#counter2',
    data() {
        return {
            config: {
                number: [0],
                content: '{nt}条'
            }
        }
    },
    methods: {
        setnum: function (num) {
            this.config = {
                number: [num],
                content: '{nt}条'
            };
            return this.config;
        }
    }
});
// }
//------------ 设备总量 -----------
// function counter3(num) {
var counterVue3 = new Vue({
    el: '#counter3',
    data() {
        return {
            config: {
                number: [0],
                content: '{nt}台'
            }
        }
    },
    methods: {
        setnum: function (num) {
            this.config = {
                number: [num],
                content: '{nt}台'
            };
            return this.config;
        }
    }
});
// }

//------------ 在线设备 -----------
// var counterVue4;
// function counter4(num) {
var counterVue4 = new Vue({
    el: '#counter4',
    data() {
        return {
            config: {
                number: [0],
                content: '{nt}台',
                key: 0
            }
        }
    },
    methods: {
        setnum: function (num) {
            this.config = {
                number: [num],
                content: '{nt}台'
            };
            return this.config;
        }
    }
});
// }
//------------ 在线设备 -----------
// axios
//     .get('/d/isworking')
//     .then(function (response) {
//         let working_list = response.data.working_list;
//         let num = Object.keys(working_list).length;
//         counter4(num);
//     })
//     .catch(function (error) {
//         console.log(error)
//     });
// counter4(0);
/**------------------------------- 图表 --------------------------------*/
//-------------------- 图表 --------------------------
//-------------------- 月统计 --------------------------
function chart1(data, xAxis) {
    let chart = echarts.init(document.getElementById('chart1'));
    let option = {
        title: {
            text: '月统计',
            textStyle: {
                color: '#FFFFFF'
            },
            left: 100
        },
        tooltip: {
            tigger: 'item',
            formatter: "{b}日: {c}条"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis,
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        },
        grid: {
            top: 30,
            left: 40
        },
        series: [{
            data: data,
            type: 'line',
            areaStyle: {}
        }],
        color: ['#0BC3A9']
    };
    chart.setOption(option);
}

//-------------------- 年统计 --------------------------
function chart2(data) {
    let chart = echarts.init(document.getElementById('chart2'));
    let option = {
        title: {
            text: '年统计',
            textStyle: {
                color: '#FFFFFF'
            },
            left: 100
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月',
                '四月', '五月', '六月', '七月',
                '八月', '九月', '十月', '十一月', '十二月'],
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        },
        tooltip: {
            tigger: 'item',
            formatter: "{b}: {c}条"
        },
        grid: {
            top: 30,
            left: 40
        },
        series: [{
            data: data,
            type: 'bar',
            areaStyle: {}
        }],
        color: ['#0BC3A9']
    };
    chart.setOption(option);
}

//-------------------- 分类统计 --------------------------
function chart3(data, legend) {
    let chart = echarts.init(document.getElementById("chart3"));
    let option = {
        title: {
            text: '分类统计',
            textStyle: {
                color: "#FFFFFF"
            },
            left: 95,
        },
        tooltip: {
            tigger: 'item',
            formatter: "{a}<br/>{b}: {c}条({d}%)"
        },
        legend: {
            orient: 'vertical',
            data: legend,
            left: 0,
            top: 0,
            textStyle: {
                color: '#FFFFFF'
            }
        },
        series: [{
            name: "分类",
            type: 'pie',
            radius: '65%',
            data: data,
            label: {
                show: false,
                position: 'inside',
                formatter: "{a}:{c}",
                color: '#FFFFFF'
            },
            itemStyle: {
                opacity: 1
            },
            center: ['63%', '55%']
            // data: [5, 20, 36, 10, 10, 20,19,27]
        }],
        color: ['#027B82', '#0BC3A9', '#9FE6B8', '#FFDB5C', '#B03A5B']
    };
    chart.setOption(option);
}

//-------------------- 时间统计 --------------------------
function chart4(data) {
    let chart = echarts.init(document.getElementById("chart4"));
    let option = {
        title: {
            text: '时间统计',
            textStyle: {
                color: '#FFFFFF'
            },
            left: 95
        },
        tooltip: {
            tigger: 'item',
            formatter: "{b}: {c}条"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00",
                "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00",
                "17:00", "18:00", "19:00",
                "20:00", "21:00", "22:00", "23:00"],
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        },
        grid: {
            top: 35,
            left: 45
        },
        series: [{
            data: data,
            type: 'line',
            areaStyle: {}
        }],
        color: ['#0BC3A9']
    };
    chart.setOption(option);
}

//-------------------- axios --------------------------
/**------------------------------- 滚动条 --------------------------------*/
//---------- 滚动条 ----------
// function scroll(data) {
var scroll = new Vue({
    el: '#scroll',
    data() {
        return {
            config: {
                // header: ['列1', '列2', '列3'],
                data: [['', '', '', ''], ['', '', '', ''], ['', '', '', '']],
                // headerBGC:"#0ACCAE",
                oddRowBGC: "#133F58",
                evenRowBGC: "#033447"
                , columnWidth: [200, 200, 200, 600]
            }
        }
    },
    methods: {
        setdata: function (data) {
            this.config = {
                // header: ['列1', '列2', '列3'],
                data: data,
                // headerBGC:"#0ACCAE",
                oddRowBGC: "#133F58",
                evenRowBGC: "#033447"
                ,columnWidth: [200, 200, 200, 600]
            };
            return this.config;
        }
    }
});
// }
//-------------------- 工具 --------------------------
//---------- 获取本月天数 --------------
function getCountDays() {
    let curDate = new Date();
    let curMonth = curDate.getMonth();
    curDate.setMonth(curMonth + 1);
    curDate.setDate(0);
    return curDate.getDate();
}

function getEveryDay() {
    let dayArry = [];
    let day = getCountDays();
    for (let k = 1; k <= day; k++) {
        dayArry.push(k);
    }
    return dayArry;
}

//------------ axios -----------
//------------ 检测天数 黑广播数-----------
// var host = window.location.host;
// websocket 获取数据
// 工作人员

function setCounter(counter) {
    let date_diff = counter['date_diff'];
    let blackbrocast = counter['blackbrocast'];
    let mobilenum = counter['MobileNum'];
    counterVue1.setnum(date_diff);
    counterVue2.setnum(blackbrocast);
    counterVue3.setnum(mobilenum);
}

function chartYeatMonth(chart_yeat_month) {
    let y_data = chart_yeat_month['y_data'];
    let m_data = chart_yeat_month['m_data'];
    chart1(m_data, getEveryDay());
    chart2(y_data);
}

function chartCategory(category) {
    let lengend = category['legend'];
    let data = category['category'];
    chart3(data, lengend);
}

function chartTime(time_count) {
    let time_list = time_count['time_list'];
    chart4(time_list);
}

function chartScroll(Scroll) {
    let data = Scroll;
    scroll.setdata(data);
}

function heatMap(heatdata) {
    let data = heatdata;
    ResetHeat(data);
}

// axios
//     .get('/d/bigscreen/counter')
//     .then(function (response) {
//         // counter1(response.data.date_diff);
//         let data = response.data;
//         counterVue1.setnum(data['date_diff']);
//         // counterVue1.setnum(5);
//         counterVue2.setnum(data['blackbrocast']);
//         // counter2(response.data.blackbrocast);
//     })
//     .catch(function (error) {
//         console.log(error)
//     });
// //------------ 设备总量 -----------
// axios
//     .get('/d/bigscreen/counter')
//     .then(function (response) {
//         let data = response.data.MobileNum;
//         // counter3(data);
//         counterVue3.setnum(data);
//     })
//     .catch(function (error) {
//         console.log(error)
//     });
//-------------------- 分类统计 --------------------------
// axios
//     .get('/d/bigscreen/category')
//     .then(function (response) {
//         let data = response.data.data;
//         let legend = response.data.legend;
//         chart3(data, legend);
//     })
//     .catch(function (error) {
//         console.log(error)
//     });
//-------------------- 时间统计 --------------------------
// axios.get('/d/bigscreen/time')
//     .then(function (response) {
//         let data = response.data.time_list;
//         chart4(data);
//     })
//     .catch(function (error) {
//         console.log(error)
//     });
//-------------------- 年统计、月统计 --------------------------
// axios
//     .get('/d/bigscreen')
//     .then(function (response) {
//         chart1(response.data.shuju.m_data, getEveryDay());
//         chart2(response.data.shuju.y_data);
//     })
//     .catch(function (error) {
//         console.log(error)
//     });
//---------- axios ----------
// axios
//     .get('/d/bigscreen/scroll')
//     .then(function (response) {
//         let data = response.data.data;
//         // scroll(data);
//         scroll.setdata(data);
//     })
//     .catch(function (error) {
//         console.log(error)
//     });
